<template>
  <q-layout view="lHh Lpr lFf">
    <Menu :menus="menus" />
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import Menu from "components/Menu.vue";

import { MenuItem } from "components/models";

const linksList: MenuItem[] = [
  {
    name: "Home",
  },
  {
    name: "Case",
    children: [
      {
        name: "CaseIndex",
      },
    ],
  },
  {
    name: "Setting",
    children: [
      {
        name: "RoleIndex",
      },
      {
        name: "UserIndex",
      },
      {
        name: "SettingIndex",
      },
    ],
  },
];

import { defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "MainLayout",

  components: {
    Menu,
  },

  setup() {    
    const router = useRouter();

    const allRoutes = router.getRoutes();
    let routeMap = new Map();
    allRoutes.forEach((route)=>{
      routeMap.set(route.name, route.meta);
    })

    linksList.forEach((item_1)=>{
      Object.assign(item_1, routeMap.get(item_1.name));
      if(item_1.children){
        item_1.children.forEach((item_2)=>{
          Object.assign(item_2, routeMap.get(item_2.name));
        })
      }
    })
    
    return {
      menus: linksList,
    };
  },
});
</script>
